<template>
  <div class="todoapp">
    <!-- 除了驼峰, 还可以使用-转换链接 -->
    <todo-header :arr="list" @createTask="onCreate"></todo-header>
    <todo-main :arr="filterList" @delItem="onDelItem"></todo-main>
    <todo-footer 
    :arr="list"
    @onClear="onClear" 
    :active="isActive"
    @setActive="onSetActive"></todo-footer>
  </div>
</template>

<script>
import TodoHeader from './components/TodoHeader.vue'
import TodoMain from "./components/TodoMain.vue";
import TodoFooter from "./components/TodoFooter.vue";
export default {
  data () {
    return {
      // undone未完成  done已完成  all全部
      isActive:'all',
      list: JSON.parse(localStorage.getItem('list'))||[]
    }
  },
  watch:{
    list:{
      deep:true,
      handler(){
        localStorage.setItem('list',JSON.stringify(this.list))
      }
    }
  },
  computed:{
    // 点击 全部/未完成/已完成 渲染数据
    filterList(){
      // 未完成
      if(this.isActive=='undone') return this.list.filter(item=>!item.isDone)
      // 已完成
      if(this.isActive=='done') return this.list.filter(item=>item.isDone)
      // 全部
      return this.list
    }
  },
  methods: {
    // 添加任务
    onCreate(taskName){
      const flag= this.list.some(item=>item.name===taskName)
      if(flag) return alert('任务已存在')
      const Id=this.list[this.list.length-1] ?this.list[this.list.length-1].id :99
      this.list.push({ id: Id+1, name: taskName, isDone: false })
    },
    // 清除已完成
    onClear(undone){
      this.list=undone
    },
    // 点击 全部/未完成/已完成 高亮效果
    onSetActive(active){
      this.isActive=active
    },
    onDelItem(id){
      const index= this.list.findIndex(item=>item.id===id)
      this.list.splice(index,1)
    }
  },
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter,
  },
}
</script>

<style scoped>

</style>

